<template>
  <div class="widget-config">
    <el-form label-suffix="：" v-if="this.data && Object.keys(this.data).length > 0" size="small">
      <el-collapse v-model="collapse" accordion>
        <el-collapse-item name="1" title="基本属性">
          <el-form-item label="属性名称">
            <avue-input style="width: 70%" v-model="data.prop" clearable placeholder="属性名称"></avue-input>
          </el-form-item>
          <el-form-item label="标题">
            <el-input style="width: 70%" v-model="data.label" clearable placeholder="标题"></el-input>
          </el-form-item>
          <el-form-item label="UI组件类型" v-if="data.type && !data.component">
            <el-select style="width: 70%" v-model="data.type" placeholder="请选择UI组件类型" @change="handleChangeType">
              <el-option-group v-for="group in fields" :key="group.title" :label="group.title">
                <el-option v-for="item in group.list"
                           :key="item.type"
                           :label="item.label"
                           :value="item.type">
                </el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
          <el-form-item label="宽度" v-if="data.subfield">
            <el-input-number style="width: 70%" v-model="data.width" controls-position="right" placeholder="宽度" :min="100"></el-input-number>
          </el-form-item>
          <el-form-item label="表单栅格" v-if="!data.subfield && !['group'].includes(data.type)">
            <el-input-number style="width: 70%" v-model="data.span" controls-position="right" placeholder="表单栅格" :min="8" :max="24"></el-input-number>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="2" title="数据配置">
          <el-form-item label="数据类型">
            <el-select style="width: 70%" v-model="data.sqlType" placeholder="请选择数据类型">
              <el-option v-for="item in dateTypes"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据长度">
            <el-input-number style="width: 70%" v-model="data.sqlTypeDataLength" :min="1" placeholder="请输入数据长度"></el-input-number>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="3" title="高级配置">
          <el-form-item label="新增时是否可见">
            <el-radio-group v-model="data.addDisplay" size="small">
              <el-radio v-for="(item,index) in formFieldHandlerState.display" :key="'data.addDisplay'+index"
                        :label="item.value" border>{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="新增时是否禁用">
            <el-radio-group v-model="data.addDisabled" size="small">
              <el-radio v-for="(item,index) in formFieldHandlerState.disabled" :key="'data.disabled'+index"
                        :label="item.value" border>{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="修改时是否可见">
            <el-radio-group v-model="data.editDisplay" size="small">
              <el-radio v-for="(item,index) in formFieldHandlerState.display" :key="'data.addDisplay'+index"
                        :label="item.value" border>{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="修改时是否禁用">
            <el-radio-group v-model="data.editDisabled" size="small">
              <el-radio v-for="(item,index) in formFieldHandlerState.disabled" :key="'data.disabled'+index"
                        :label="item.value" border>{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否显示在表格中">
            <el-radio-group v-model="data.hide" size="small">
              <el-radio v-for="(item,index) in formFieldHandlerState.hide" :key="'data.hide'+index"
                        :label="item.value" border>{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="启用搜索">
            <el-radio-group v-model="data.search" size="small">
              <el-radio v-for="(item,index) in formFieldHandlerState.search" :key="'data.disabled'+index"
                        :label="item.value" border>{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-show="data.search">
            <el-form-item label="搜索模式">
              <el-select style="width: 70%" v-model="data.searchModel" placeholder="请选择搜索模式">
                <el-option v-for="item in formFieldHandlerState.searchModels"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="搜索宽度">
              <el-input-number style="width: 70%" v-model="data.searchSpan" controls-position="right" placeholder="搜索宽度" :min="6" :max="24"></el-input-number>
            </el-form-item>
            <el-form-item label="搜索标签宽度">
              <el-input-number style="width: 65%" v-model="data.searchLabelWidth" controls-position="right" placeholder="搜索标签宽度" :min="80" :max="1000"></el-input-number>
            </el-form-item>
          </div>
          <el-form-item label="数据类型" v-if="['cascader','checkbox','upload','img','array'].includes(data.type)">
            <el-select v-model="data.dataType"
                       placeholder="数据类型"
                       clearable>
              <el-option label="String" value="string"></el-option>
              <el-option label="Number" value="number"></el-option>
            </el-select>
            &nbsp;<a href="https://avuejs.com/doc/dataType"
                     target="_blank"
                     style="color: #409EFF;">详情</a><br>
          </el-form-item>
          <el-form-item label="深结构" v-if="data.type && !data.component">
            <a href="https://avuejs.com/doc/form/form-bind" target="_blank" style="color: #409EFF;">详情</a><br>
            <el-input v-model="data.bind" placeholder="深结构"></el-input>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="4" title="UI属性">
          <component :is="getComponent" :data="data"></component>
        </el-collapse-item>
        <el-collapse-item name="5"
                          title="事件属性"
                          v-if="!['group', 'dynamic'].includes(data.type)">
          <el-form-item label="change">
            <avue-input v-model="data.change"
                        type="textarea"
                        placeholder="改变事件"
                        rows="5"
                        clearable></avue-input>
          </el-form-item>
          <el-form-item label="click">
            <el-input v-model="data.click" type="textarea" placeholder="点击事件" rows="5"></el-input>
          </el-form-item>
          <el-form-item label="focus">
            <el-input v-model="data.focus"
                      type="textarea"
                      placeholder="获取焦点事件"
                      rows="5"></el-input>
          </el-form-item>
          <el-form-item label="blur">
            <el-input v-model="data.blur"
                      type="textarea"
                      placeholder="失去焦点事件"
                      rows="5"></el-input>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <avue-empty v-else desc="拖拽字段进行配置" style="margin-top: 100%;"></avue-empty>
  </div>
</template>

<script>
import fields, {dateTypes, formFieldHandlerState} from './fieldsConfig.js'

const dateArr = [
  'year', 'month', 'week', 'date', 'datetime', 'time', 'daterange', 'timerange', 'datetimerange', 'dates'
]

export default {
  name: 'widget-config',
  props: ['data'],
  computed: {
    getComponent() {
      const prefix = 'config-'
      const {type, component} = this.data
      if (!type || component) return prefix + 'custom'
      let result = 'input'

      if ([undefined, 'input', 'password', 'url'].includes(type)) result = 'input'
      else if (dateArr.includes(type)) result = 'date'
      else if (['array', 'img'].includes(type)) result = 'array'
      else result = type

      return prefix + result
    }
  },
  data() {
    return {
      dateTypes,
      formFieldHandlerState,
      fields,
      collapse: "1",
      UI_Collapse: '2'
    }
  },
  methods: {
    async handleChangeType(type) {
      if (type) {
        const config = await this.getConfigByType(type);
        config.prop = this.data.prop;
        for (let key in config) {
          if (config && Object.prototype.hasOwnProperty.call(config, key) && !['icon', 'label', 'span'].includes(key)) {
            const val = config[key]
            this.$set(this.data, key, val);
          }
        }
      }
    },
    getConfigByType(type) {
      return new Promise((resolve, reject) => {
        fields.forEach(field => {
          field.list.forEach(config => {
            if (config.type == type) resolve(config)
          })
        })
        reject()
      })
    }
  }
}
</script>
